<template>
  <div class="app-container">
    <el-form
      ref="listFilterRef"
      :model="list.filter"
      inline
      class="list-filter"
    >
      <el-form-item prop="effect">
        <KiSelect
          v-model="list.filter.effect"
          :options="[
            { value: true, key: '生效中' },
            { value: false, key: '未生效' }
          ]"
          placeholder="是否生效"
          :props="{ value: 'value', label: 'key' }"
        />
      </el-form-item>
      <el-form-item prop="status">
        <Status v-model="list.filter.status" />
      </el-form-item>
      <el-form-item prop="name">
        <el-input
          v-model="list.filter.name"
          placeholder="请输入名称搜索"
          clearable
        />
      </el-form-item>
      <el-form-item prop="districtCode">
        <RegionSelect
          v-model="list.filter.districtCode"
          :props="{ checkStrictly: true }"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="reset">
          重置
        </el-button>
      </el-form-item>
    </el-form>

    <div class="table-operation">
      <div>
        <AuthButton @click="c" name="新增" />
        <!-- &nbsp;&nbsp;&nbsp;&nbsp;
        <AuthButton @click="deleteBanner" name="批量删除" /> -->
      </div>
      <el-pagination
        v-bind="elPaginationProps"
        :total="list.total"
        :currentPage.sync="list.filter.pageNo"
        :pageSize.sync="list.filter.pageSize"
      />
    </div>

    <el-table
      v-loading="list.loading"
      :data="list.data"
      v-bind="tableProp"
      @selection-change="handleSelectionChange"
    >
      <!-- <el-table-column type="selection" width="55"></el-table-column> -->

      <el-table-column label="名称" prop="name" />
      <el-table-column label="行政区" prop="districtName" />
      <el-table-column label="图片">
        <template slot-scope="scope">
          <PicViewer :value="scope.row.filePath" tableCell />
        </template>
      </el-table-column>
      <el-table-column label="生效时段">
        <template slot-scope="scope">
          {{ scope.row.startTime.substr(0, 11) }} 至
          {{ scope.row.endTime.substr(0, 11) }}
          <el-tag
            v-if="new Date().getTime() > new Date(scope.row.endTime).getTime()"
            type="danger"
          >
            已过期
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="跳转类型">
        <template slot-scope="{ row }">
          {{ row.type | $value2label(dict.link_type) }}
        </template>
      </el-table-column>
      <el-table-column label="跳转资源名称" prop="sourceName" />
      <el-table-column label="启用状态" width="80" align="center">
        <template slot-scope="{ row: { id, status } }">
          <KiPopSwitch
            v-bind="popSwitchProps(status)"
            @change="updateStatus({ id, status: status ^ 1 })"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <auth-button @click="u({ id: row.id })" name="编辑" />
          <auth-button @click="d({ id: row.id })" name="删除" />
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog
      :show.sync="form.show"
      :title="formTitle"
      v-model="form.data"
      :submit="submitForm"
      :readonly="form.status === 'r'"
      ref="formRef"
      :loading="form.loading"
    >
      <template #el-form>
        <el-form-item label="名称" prop="name" :verify="{ maxLength: 30 }">
          <el-input
            v-model="form.data.name"
            placeholder="请输入名称"
            maxlength="30"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="行政区" prop="districtCodes" verify>
          <RegionSelect
            v-model="form.data.districtCodes"
            :props="{ multiple: true, checkStrictly: true }"
            :level="2"
          />
        </el-form-item>
        <el-form-item label="上传图片" prop="filePath" verify>
          <Imgpond v-model="form.data.filePath" aspectRatio="9/19" :count="1" />
        </el-form-item>
        <el-form-item label="生效时间" prop="startTime" verify>
          <TimeRangePicker
            :start.sync="form.data.startTime"
            :end.sync="form.data.endTime"
            placeholder="生效起期/生效止期"
          />
        </el-form-item>
        <el-form-item label="序号" prop="sort" verify>
          <Sort v-model="form.data.sort" />
        </el-form-item>
        <el-form-item label="跳转页面" prop="id">
          <GlobalSearch
            v-if="form.show"
            v-model="form.data.sourceId"
            :type.sync="form.data.type"
            :sourceId.sync="form.data.sourceId"
            :sourceName.sync="form.data.sourceName"
          />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'

export default {
  mixins: [pageMixin],
  setup: () =>
    useAdmateAdapter({
      urlPrefix: 'one-travel-api/districtbackground'
    }),
  data () {
    return {
      selectList: []
    }
  },
  watch: {
    'form.show' (newVal) {
      newVal && (this.form.data.type = '00')
      setTimeout(() => {
        if (newVal && !this.form.data.id) {
          this.form.data.status = 1
          this.form.data.sort = 1
        }
      }, 10)
    }
  },
  methods: {
    handleSelectionChange (list) {
      this.selectList = list
    },
    // 批量删除
    deleteBanner () {
      if (this.selectList.length == 0) {
        this.$swal.error('至少选择一项')
        return
      }
      this.$confirm(
        `点击确定将删除选中的${this.selectList.length}项, 是否继续?`,
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        }
      ).then(() => {
        this.$POST('one-travel-api/districtbackground/batchdelete', {
          ids: this.selectList.map(item => item.id)
        }).then(res => {
          if (res.errorCode == '00000') {
            this.$swal.success('删除成功！')
            // 如果当前页全部被删除，页码减少
            if (
              this.list.data.length == this.selectList.length &&
              this.list.filter.pageNo > 1
            ) {
              this.list.filter.pageNo--
            }
            this.getList()
          } else {
            this.$swal.error(res.message)
          }
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
